<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智鉴 AI 面试助手 - 模拟真实场景，助力高校学生高效备战面试</title>
    <link rel="stylesheet" href="./asserts/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="logo-container">
            <img src="./asserts/logo.png" alt="智鉴 Logo" class="logo">
            <h1>智鉴 AI 面试助手 - 模拟真实场景，助力高校学生高效备战面试</h1>
        </div>
    </header>
    <div class="sidebar">
        <a href="#home" onclick="showSection('home')">首页</a>
        <a href="#mock-interview" onclick="showSection('mock-interview')">模拟面试</a>
        <a href="#analysis-results" onclick="showSection('analysis-results')">分析结果</a>
        <a href="#ai-chat" onclick="showSection('ai-chat')">AI 对话</a>
    </div>
    <main id="content">
        <div id="ai-chat" class="section" style="display: none; width: 800px;  margin: 20px auto;">
            <div class="card" style="width: 100%;">
                <h2>与 AI 面试助手对话</h2>
                <div class="chat-container" id="chat-container">
                    <!-- 聊天记录会动态插入到这里 -->
                </div>
                <div class="input-area">
                    <input type="text" id="chat-input" placeholder="输入您的问题..." />
                    <button class="button" onclick="sendMessage()">发送</button>
                </div>
            </div>
        </div>
        <div id="home" class="section">
            <div class="card">
                <h2>欢迎使用智鉴 AI 面试助手</h2>
                <p>本系统旨在帮助高校学生更好地准备实际面试。通过模拟真实的面试场景，提供全面的面试反馈，帮助学生提升面试技巧。</p>
            </div>
        </div>
         
            <div id="video-recording" class="section" style="display: none;">
                <div class="card">
                    <h2>面试录制中</h2>


                    <!-- 独立题目卡片区域 -->
                <div class="question-card">
                    <div class="question-header">
                        <h3>面试题目</h3>
                    <div class="question-count">第 <span id="question-number">1</span> 题</div>
                </div>
                <div class="question-content">
                    <p id="current-question">请等待题目加载...</p>
                </div>
                <div class="question-navigation">
                    <button class="button nav-btn" onclick="prevQuestion()">上一题</button>
                    <button class="button nav-btn" onclick="nextQuestion()">下一题</button>
                </div>
             </div>

                    <video id="video-preview" autoplay muted class="video-preview"></video>
                        <div class="recording-controls">
                            <button class="button" onclick="startRecording()">开始录制</button>
                            <button class="button" onclick="stopRecording()">结束录制</button>
                        </div>
                        <!-- 新增：录制状态显示 -->
                        <div style="text-align: center; margin-top: 15px;">
                            <span id="recording-timer" style="font-size: 18px; font-weight: bold; color: #3B82F6;">00:00</span>
                            <span id="recording-status" style="margin-left: 15px; font-size: 16px;"></span>
                        </div>
                </div>
            </div>

        <div id="mock-interview" class="section" style="display: none;">
            
            <div class="card" id="job-selection-card">
                <h2>选择面试场景</h2>
                <div class="select-container">
                    <label for="job-scenario">请选择一个面试场景:</label>
                    <select id="job-scenario">
                        <option value="">--请选择--</option>
                        <option value="ai-engineer">人工智能工程师</option>
                        <option value="big-data-analyst">大数据分析师</option>
                        <option value="iot-specialist">物联网专家</option>
                        <option value="product-manager">产品经理</option>
                    </select>
                </div>
                <div class="select-container">
                    <label for="resume-upload">上传您的简历 (PDF 格式):</label>
                    <input type="file" id="resume-upload" accept=".pdf,application/pdf"  onchange="validateResumeFile(this)">
                     <div class="file-error" id="resume-error">仅支持 PDF 文件，最大 10MB</div>
                </div>
                <button class="button" onclick="startInterview()">开始面试</button>
            </div>
        </div>
        <div id="analysis-results" class="section" style="display: none;">
            <div class="card">
                <h2>面试反馈</h2>
                <p id="feedback-text"></p>

                <!-- 新增：改进意见 -->
                <div id="improvement-tips" style="margin-top: 20px; font-size: 16px; color: #333;"></div>

                 <!-- 新增：生成简历按钮 -->
                <button class="button" onclick="generateResume()">生成简历</button>

                <canvas id="radar-chart" width="300" height="300"></canvas>
            </div>
        </div>
    </main>
    <footer>
        <p>&copy; 2025 智鉴 AI 面试助手 </p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="./asserts/script.js"></script>
</body>
</html>